<template>
  <div class="top-menu">
    <el-row type="flex">
      <div style="width: 200px; text-align: center" class="logo">购物网</div>
      <div style="flex: 1">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#b93a31"
          router
        >
          <el-menu-item index="/product">文创商城</el-menu-item>
          <el-menu-item index="/agricultrue">助农产品</el-menu-item>
          <el-menu-item index="/classic">时代经典</el-menu-item>
          <el-menu-item index="/book">强国图书</el-menu-item>
        </el-menu>
      </div>

      <div style="width: 200px" class="shopcar">
        我的购物车<i class="el-icon-shopping-cart-2" />
      </div>

      <el-dropdown @command="command">
        <div class="el-dropdown-link c-name">
          {{ name }}<i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeIndex: "0",
      num: 0,
      name: localStorage.getItem("name"),
    };
  },
  methods: {
    handleSelect(index) {},
    command(index) {
      console.log(index);
      if (index == "1") {
        // 退出菜单
        // 调用服务端退出接口、跳转到登录页面
        axios.post("/v1/logout").then(() => {
          this.$router.push({
            name: "login",
          });
        });
      }
    },
  },
};
</script>

<style scoped>
.top-menu {
  background: #545c64;
  height: 60px;
}

.logo,
.shopcar,
.admincss {
  color: #fff;
  line-height: 60px;
}
.shopcar {
  color: #9cf;
  cursor: pointer;
}
.c-name {
  width: 150px;
  font-size: 16px;
  cursor: pointer;
  color: #fff;
  text-align: center;
  line-height: 60px;
}
</style>
